<template>
	<view class="all-main">
		<u-loading-page :loading="loadding" loading-mode="semicircle" loading-text="欢迎进入风动社区"></u-loading-page>
		<view v-if="!loadding" class="main">
			<view class="titles">
				<view class="lefts">
					{{lists.title}}
				</view>
				<view class="rights">
					<view v-if="lists.isTake == 0" class="btn reds" @click="participateIn">
						参与
					</view>
					<view v-else class="btn greens">
						已参与
					</view>
				</view>
			</view>
			<view class="explain">
				<view class="tags">
					说明
				</view>
				<u-line></u-line>
				<view class="content">
					<view class="remark">
						{{lists.remark}}
					</view>
					<u-line dashed=""></u-line>
					<view class="gift">
						<view v-for="(item, index) in giftList" :key="index" class="items">
							<view class="img">
								<u--image :src="item.image" width="60" height="60" shape="radius"></u--image>
							</view>
							<view class="title">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="explain">
				<view class="tags">
					规则
				</view>
				<u-line></u-line>
				<view class="content">
					{{lists.guize}}
				</view>
			</view>
			<view class="participate">
				<text class="tips">目前参与人数</text>
				<text class="nums">{{lists.takeNo}}</text>
			</view>
			<view v-if="lists.isTake == 1" class="standard">
				<view class="title">
					我的达标
				</view>
				<u-line></u-line>
				<view v-if="lists.mine" class="info">
					<view class="datas">
						<view class="lefts">
							<text class="numsA">{{lists.mine.tranAmt}}</text>
							<text>/</text>
							<text class="numsB">{{lists.mine.stanAmt}}</text>
						</view>
						<view class="rights">
							<text v-if="lists.mine.isStands == 2" class="reds">未达标</text>
							<text v-else class="greens">已达标</text>
						</view>
					</view>
					<u-line dashed=""></u-line>
					<view class="dates">
						<view class="lefts">
							有效时间
						</view>
						<view class="rights">
							<text class="dateA">{{lists.mine.start}}</text>
							<text>~</text>
							<text class="dateB">{{lists.mine.ends}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="participation">
				<view class="msg">
					<text class="title">达标用户</text>
					<text class="nums">{{standsCount}}</text>
				</view>
				<u-line></u-line>
				<view class="avatarList">
					<view v-for="(item, index) in standsList" :key="index" class="items">
						<u--image :src="item.imgUrl" width="36" height="36" shape="radius"></u--image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var util = require('@/util/request5.js');
	export default {
		data() {
			return {
				loadding: true,
				lists: [],
				userinfo: {},
				standsList: [],
				standsCount: 0,
				is_participate: 1,
				giftList: []
			}
		},
		onLoad() {
			this.userinfo = uni.getStorageSync('userinfo');
			this.getData()
			this.getStandsList()
			this.getGift()
		},
		onShow() {
			this.getData()
		},
		methods: {
			// 获取活动
			async getData() {
				const {
					data: res
				} = await this.$myHttp5({
					url: 'Activity/descrip',
					header: {
						'token': this.userinfo.token
					}
				});
				if (res.code == 1) {
					this.lists = res.data
				}
			},
			// 获取达标人头像
			async getStandsList() {
				const {
					data: res
				} = await this.$myHttp5({
					url: 'Activity/stands_list',
					data: {
						type: 1
					},
					header: {
						'token': this.userinfo.token
					}
				});
				this.loadding = false
				if (res.code == 1) {
					this.standsList = res.data.data
					this.standsCount = res.data.total
				}
			},
			// 获取礼品
			async getGift() {
				const {
					data: res
				} = await this.$myHttp5({
					url: 'v1/getGiftList',
					data: {
						type: 4
					},
					header: {
						'token': this.userinfo.token
					}
				});
				if (res.code == 1) {
					res.data.map(item => {
						item.image = util.API_URL + item.image
					})
					this.giftList = res.data
				}
			},
			// 参与活动
			participateIn() {
				var that = this
				uni.showModal({
					title: '提示',
					content: '确定要参与吗？',
					success: function(res) {
						if (res.confirm) {
							that.participateInFun()
						}
					}
				});
			},
			// 参与活动 - 方法
			async participateInFun() {
				var that = this
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp5({
					url: 'Activity/take_part',
					data: {
						actid: this.lists.id
					},
					header: {
						'token': this.userinfo.token
					}
				});
				uni.hideLoading()
				uni.showToast({
					title: res.msg,
					icon: "none"
				});
				if (res.code == 1) {
					setTimeout(function() {
						that.getData()
					}, 1000)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f3f4f6;
	}
	
	.all-main {
		.main {
			.titles {
				padding: 30rpx;
				display: flex;
				justify-content: space-between;
				background-color: #ffffff;
				font-size: 34rpx;
				font-weight: bold;
				.lefts {
					width: 70%;
					display: flex;
					align-items: center;
				}
				.rights {
					.btn {
						font-size: 28rpx;
						padding: 10rpx 20rpx;
						border-radius: 16rpx;
						color: #ffffff;
					}
					
					.reds {
						background-color: #dd6161;
					}
					
					.greens {
						background-color: #18b566;
					}
				}
			}
			
			.explain {
				margin: 20rpx;
				padding: 20rpx;
				border-radius: 12rpx;
				background-color: #ffffff;
				.tags {
					font-size: 32rpx;
					font-weight: bold;
					padding-bottom: 10rpx;
				}
				.content {
					padding: 20rpx 20rpx 0 20rpx;
					font-size: 26rpx;
					.remark {
						padding-bottom: 20rpx;
					}
					
					.gift {
						display: flex;
						flex-wrap: wrap;
						padding: 20rpx 0 0 0;
						
						.items {
							width: 25%;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							
							.title {
								font-size: 24rpx;
								padding: 10rpx 0;
							}
						}
					}
				}
			}
			
			.participate {
				margin: 20rpx;
				background-color: #ffffff;
				padding: 20rpx;
				font-size: 28rpx;
				display: flex;
				
				.tips {
					display: flex;
					align-items: center;
				}
				
				.nums {
					margin-left: 20rpx;
					color: #fa3534;
					font-weight: bold;
					font-size: 32rpx;
				}
			}
			
			.standard {
				background-color: #ffffff;
				margin: 20rpx;
				padding: 20rpx;
				
				.title {
					font-size: 32rpx;
					font-weight: bold;
					padding-bottom: 10rpx;
				}
				
				.info {
					font-size: 26rpx;
					.datas {
						display: flex;
						justify-content: space-between;
						padding: 20rpx 0;
						
						.lefts {
							font-weight: bold;
							.numsA {
								padding-right: 10rpx;
							}
							
							.numsB {
								padding-left: 10rpx;
							}
						}
						
						.rights {
							font-weight: bold;
							
							.reds {
								color: #fa3534;
							}
							
							.greens {
								color: #19be6b;
							}
						}
					}
					
					.dates {
						display: flex;
						justify-content: space-between;
						padding: 20rpx 0 0 0;
						color: #909399;
						.rights {
							.dateA {
								padding-right: 10rpx;
							}
							.dateB {
								padding-left: 10rpx;
							}
						}
					}
				}
			}
			
			.participation {
				margin: 20rpx;
				padding: 20rpx;
				background-color: #ffffff;
				
				.msg {
					display: flex;
					justify-content: space-between;
					padding-bottom: 10rpx;
					
					.nums {
						font-weight: bold;
						color: #fa3534;
					}
				}
				
				.avatarList {
					padding-top: 20rpx;
					display: flex;
					flex-wrap: wrap;
					
					.items {
						width: 12.5%;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						margin-bottom: 10rpx;
					}
				}
			}
		}
	}
</style>
